<template>
  <div class="not-found">
    <div class="container">
      <div class="not-found__content">
        <h1 class="not-found__title">404</h1>
        <p class="not-found__message">页面未找到</p>
        <ElButton type="primary" @click="goHome">
          返回首页
        </ElButton>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'

const router = useRouter()

function goHome() {
  router.push('/')
}
</script>

<style lang="scss" scoped>
.not-found {
  min-height: calc(100vh - 70px - 200px);
  @include flex-center;
  
  &__content {
    text-align: center;
  }
  
  &__title {
    font-size: 8rem;
    font-weight: $font-weight-bold;
    color: var(--primary-color);
    margin-bottom: $spacing-md;
  }
  
  &__message {
    font-size: $font-size-2xl;
    color: var(--text-secondary);
    margin-bottom: $spacing-2xl;
  }
}
</style>

